<template>
  <div class="arrang-content">
    <div class="form-item">
      <div class="small-title">班级名称</div>
      <div class="row">
        <el-input placeholder="" disabled v-model="params.className"></el-input>
      </div>
    </div>
    <div class="form-item">
      <div class="small-title">上课校区</div>
      <div class="row">
        <el-select v-model="params.campus" disabled placeholder="请选择">
        </el-select>
      </div>
    </div>
    <div class="form-item">
      <div class="small-title">开课日期</div>
      <div class="row">
        <el-date-picker
          v-model="params.openingDate"
          type="date"
          placeholder="请选择"
          :shortcuts="[{ text: '今天', value: new Date()}]"
        />
      </div>
    </div>
    <div class="form-item">
      <div class="small-title">结束日期</div>
      <div class="row">
        <el-select v-model="params.closeType"  placeholder="请选择">
          <el-option value="按课次" label="按课次"></el-option>
          <el-option value="按日期" label="按日期"></el-option>
        </el-select>
      </div>
      <div class="close-date" v-if="params.closeType == '按日期'">
        <el-date-picker
          v-model="params.closeDate"
          type="date"
          placeholder="请选择"
          :shortcuts="[{ text: '今天', value: new Date()}]"
        />
      </div>
    </div>
    <div class="form-item">
      <div class="small-title">上课时间</div>
      <div class="row">
        <div class="checkout-box">
          <div>
            <el-radio-group v-model="params.attendClassTime">
              <el-radio label="Weekly" size="large">按周</el-radio>
              <el-radio label="ByDay" size="large">按天</el-radio>
              <el-radio label="Calendar" size="large">日历排课</el-radio>
            </el-radio-group>
          </div>
          <div>
            <el-checkbox v-model="params.isFirstWeek" label="只展示首次排课星期" size="large" />
          </div>
          <div>
            <el-button type="primary" plain>排课预览</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 按周、按天、日历排课 -->
    <div>
      <component :is="isComponent"/>
    </div>
    <div class="form-item">
      <div class="small-title">选择老师</div>
      <div class="row">
        <div class="teach-select">
          <div>
            <el-input placeholder="单击选择授课老师" @focus="selectTeacher(1)" v-model="params.teacher"></el-input>
          </div>
          <div>
            <el-input placeholder="单击选择助教" @focus="selectTeacher(2)" v-model="params.assistant"></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="small-title">班主任</div>
      <div class="row">
        <el-input placeholder="单击选择班主任" @focus="selectTeacher(3)" v-model="params.teacherHead"></el-input>
      </div>
    </div>
    <div class="form-item">
      <div class="small-title">上课教室</div>
      <div class="row">
        <el-select v-model="params.classRoom"  placeholder="教室">
          <el-option v-for="item in classRoomOption"
          :key="item.value"
          :value="item.value"
          :label="item.label">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="form-item" style="padding-left: 72px;">
      <el-button type="primary">
        保存
      </el-button> 
      <el-button type="danger">
        取消
      </el-button>
    </div>

    <Dialog ref="DialogRef" @saveTeacher="saveTeacher" />
  </div>
</template>
<script setup>
  import { reactive, ref, computed } from "vue";
  import Weekly from "./components/Weekly.vue";
  import ByDay from "./components/ByDay.vue";
  import Calendar from "./components/Calendar.vue";
  import Dialog from "./components/Dialog.vue";
  const params = reactive({
    className: "化妆全科",
    campus: "东城",
    openingDate: "",
    closeType: "按课次",
    closeDate: "",
    attendClassTime: "Weekly",
    isFirstWeek: false ,
    teacher: "",
    assistant: "",
    teacherHead: "",
    classRoom: ""
  })

  const curComponent = {Weekly, ByDay, Calendar}
  const isComponent = computed(() => {
    const name = curComponent[params.attendClassTime]
    return name
  })

  const classRoomOption = ref([
    {value: "化妆教室1", label: "化妆教室1"},
    {value: "化妆教室2", label: "化妆教室2"},
    {value: "美容教室", label: "美容教室"},
    {value: "美甲教室", label: "美甲教室"}
  ])

  const DialogRef = ref(null)
  const selectTeacher = (type) => {
    DialogRef.value.getTableList(type)
  }
  const saveTeacher = (item, type) => {
    type == 1 ? params.teacher = item.name 
    : type == 2 ? params.assistant = item.name
    : params.teacherHead = item.name
  }

</script>
<style lang="scss" scoped>
@import "./arrang.scss"
</style>
  